<template>
  <div class="home-new">
    <HomePanel sub-title="新鲜出炉 品质靠谱" title="新鲜好物">
      <template #right>
        <XtxMore></XtxMore>
      </template>

      <div ref="target" style="position: relative">
        <!-- 面板内容 -->
        <Transition name="fade">
          <template #default>
            <ul v-if="goods.length" class="goods-list">
              <li v-for="item in goods" :key="item.id">
                <router-link :to="`/product/${item.id}`" class="info">
                  <img v-lazy="item.picture" alt="">
                  <p class="name ellipsis">{{ item.name }}</p>
                  <p class="alt"><i>¥</i>{{ item.price }}</p>
                </router-link>
              </li>
            </ul>

            <HomeSkeleton v-else bg="#f0f9f4"></HomeSkeleton>
          </template>
        </Transition>
      </div>
    </HomePanel>
  </div>
</template>


<script>
import HomePanel from '@/components/home/HomePanel'
import API from '@/api/home'
import { ref } from 'vue'
import HomeSkeleton from '@/components/home/HomeSkeleton'
import { useLazyData } from '@/hooks'

export default {
  name: 'HomeNew',
  components: {
    HomeSkeleton,
    HomePanel
  },
  setup() {
    // const goods = ref([])

    // API.getNewGoods()
    //   .then((res) => {
    //     goods.value = res.result
    //   })
    const {
      target,
      result: goods
    } = useLazyData(API.getNewGoods)
    return {
      goods,
      target
    }
  }
}
</script>

<style lang="less" scoped>

.home-new {
  .goods-list {
    display: flex;
    justify-content: space-between;
    height: 426px;

    li {
      width: 306px;
      height: 406px;
      background-color: #f0f9f4;
      // 使用less中 mixins混入函数
      .hoverShadow();

      a {
        width: 100%;
        height: 100%;
        display: inline-block;

        img {
          width: 306px;
          height: 306px;
        }

        p {
          font-size: 22px;
          padding: 12px 30px 0 30px;
          text-align: center;
        }

        .alt {
          color: #cf4444;
        }
      }
    }
  }
}
</style>
